<template>
  <div class="box-border lg:flex lg:flex-row-reverse lg:items-start lg:justify-between lg:pt-8">
    <!--        小屏-->
    <div class="w-full overflow-hidden lg:w-[73%]">
      <!--    top userInfo-->
      <div
        class="mx-auto mb-8 mt-5 box-border w-[99%] rounded-3xl bg-[#23282a] p-5 lg:mt-0 lg:rounded-xl lg:px-8 lg:py-8">
        <div class="mb-3.5 box-border flex items-center border-b-[.5px] border-b-[#2e3335] pb-5">
          <!--        头像-->
          <img
            v-if="memberInfo.avatar"
            class="h-10 w-10 rounded-[50%] mr-3"
            width="45px"
            height="45px"
            :src="$withPicOrigin(memberInfo.avatar)"
            :alt="'avatar'" />
          <div v-else class="mr-3 flex h-12 w-12 items-center justify-center rounded-[50%] bg-[#fff]">
            <div class="flex h-6 w-6 items-center justify-center rounded-[50%] bg-[#545b64]">
              <van-icon size="15px" name="user" />
            </div>
          </div>
          <p class="text-base font-[500]">{{ memberInfo.name }}</p>
        </div>
        <div>
          <!-- email -->
          <div class="flex items-center flex-wrap justify-between">
            <div class="flex items-center justify-between">
              <p class="mr-5 text-[#c8c9ca] w-10">Email</p>
              <p class="text-xs">{{ memberInfo.email }}</p>
            </div>
            <div class="flex items-center text-sm">
              <p class="mr-2 text-[#90C42D]">{{ $mt('VERIFIED') }}</p>
              <van-icon color="#90C42D" size="18px" name="checked" />
            </div>
          </div>
          <!-- phone -->
          <div v-if="memberInfo.phone" class="flex items-center mb-1 justify-between">
            <div class="flex items-center">
              <p class="mr-5 text-[#c8c9ca] w-10">{{ $mt('Phone') }}</p>
              <p class="text-base">{{ memberInfo.phone }}</p>
            </div>
            <div class="flex items-center lg:text-base">
              <p class="mr-2 text-[#90C42D]">{{ $mt('VERIFIED') }}</p>
              <van-icon color="#90C42D" size="18px" name="checked" />
            </div>
          </div>
          <!-- balance -->
          <div class="flex items-center mt-4 flex-wrap justify-between">
            <div class="flex items-center justify-between">
              <p class="mr-5 text-[#c8c9ca] w-10">{{ $mt('Balance') }}</p>
              <p class="text-xs">{{ $calcPrice(memberInfo.balanceForUSD) }}</p>
            </div>
            <nuxt-link
              :to="$localePath('/goods/balance-top-up')"
              external
              class="flex -mt-0.5 items-center text-sm mr-2 underline cursor-pointer text-[#03a9f4]">
              {{ $mt('Recharge Now') }}
            </nuxt-link>
          </div>
          <p class="text-white3 opacity-50 text-xs mt-1 break-words mb-2">
            {{ $mt('Your wallet balance can be used for purchases after recharging.') }}
          </p>
          <!-- Balance consumption record -->
          <div @click="isShowBalanceLogDialog = true" class="underline cursor-pointer text-[#03a9f4]">
            {{ $mt('Balance transaction history') }}
          </div>
          <!--Credits  -->
          <div class="flex items-center flex-wrap justify-between mt-4">
            <div class="flex items-center justify-between">
              <p class="mr-5 text-[#c8c9ca] w-10">{{ $mt('Credits') }}</p>
              <p class="text-xs">{{ (successOrders * 20).toFixed(3) }}</p>
            </div>
          </div>

          <!-- change password -->
          <div class="flex mt-4">
            <nuxt-link :to="$localePath('/sso/login')" external class="mr-5 link-info underline">
              {{ $mt('Change Password') }}
            </nuxt-link>
          </div>
        </div>
      </div>
      <!--    two order -->
      <div class="mx-auto box-border w-[99%] rounded-3xl bg-[#23282a] p-5 lg:rounded-xl lg:px-8 lg:py-8">
        <div class="mb-5 box-border flex items-center justify-between border-b-[.5px] border-b-[#2e3335] pb-5 text-sm">
          <p class="font-[500]">{{ $mt('My Orders') }}</p>
          <div class="flex items-center cursor-pointer text-sm" @click="$pushRoute('/user/order')">
            <p class="mr-1.5">{{ $mt('All Orders') }}</p>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="flex items-center lg:justify-between pb-4 -mb-4 overflow-x-auto hide-scrollbar">
          <div
            class="flex w-24 flex-col shrink-0 items-center justify-center"
            v-for="(item, index) in orderTitleList.slice(1)"
            :key="index">
            <p class="text-base font-[600] mb-1">{{ item.count || 0 }}</p>
            <p class="text-[#c8c9ca]">{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
    <!--    大屏显示的内容-->
    <AboutList class="hidden lg:block lg:w-[24%]" />
  </div>
  <AccountBalanceLogDialog v-model="isShowBalanceLogDialog" />
  <NewTabsFoot />
</template>

<script setup lang="ts">
import AboutList from '~/components/account/AboutList.vue'
import { useMemberStore } from '~/store/member'
import { useOrderStore } from '~/store/order'
import YImage from '~/components/logic/YImage.vue'
import NewTabsFoot from '~/components/basis/NewTabsFoot.vue'
useSeoMeta({ title: 'BitTopup - User Center' })
definePageMeta({
  middleware: 'auth',
})
const isShowBalanceLogDialog = ref(false)
const memberStore = useMemberStore()
const orderStore = useOrderStore()
const { memberInfo, isLogin } = storeToRefs(memberStore)
const { orderTitleList } = storeToRefs(orderStore)
const successOrders = computed(() => {
  return orderTitleList.value.find((item) => item.orderStatus === 'SUCCESS')?.count || 0
})
onMounted(async () => {
  await orderStore.fetchOrderNum()
})
</script>

<style lang="scss"></style>
